<template>
	<jk-view :loading="showLoading">
		<jk-operation-card class="margin-bottom-10 margin-top-10 width-100-percent fixed-operation-bar">
			<div class="flex-between-center">
				<div>
					<span class="el-icon-star-off item-gap"></span>
					<span>{{ ruleForm.code }}</span>
					<el-tag v-show="ruleForm.id" size="mini" type="info" class="margin-left-10">
						<jk-common-status :status="ruleForm.auditState"></jk-common-status>
					</el-tag>
				</div>
				<div class="flex-end-center">
					<el-button type="info" plain icon="el-icon-back" size="small" class="item-gap" @click="onJumpList">返回列表</el-button>
					<jk-save-button v-if="pageType === 'add'" :loading="saveBtnLoading" class="item-gap" :permission-prefix="prefix" @click="onConfirmBtn(0)"></jk-save-button>
					<jk-update-button v-if="pageType === 'edit'" :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" :permission-prefix="prefix" :loading="saveBtnLoading" class="item-gap" @click="onConfirmBtn(1)"></jk-update-button>
					<div v-if="pageType === 'detail'" class="item-gap"><jk-button :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" type="primary" icon="el-icon-edit" size="small" @click="onEditBtn">编辑</jk-button></div>
					<div v-if="pageType !== 'detail'" class="item-gap"><jk-button :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" :loading="saveAndEnableBtnLoading" type="primary" icon="el-icon-document-checked" size="small" @click="onConfirmBtn(2)">{{ ruleForm.id ? '更新' : '保存' }}并审核</jk-button></div>
					<jk-button v-if="(pageType === 'detail' || pageType === 'edit') && ruleForm.auditState === 1" :loading="auditStateLoading" :type="ruleForm.auditState === 1 ? 'warning' : 'success'" class="pointer item-gap" :icon="ruleForm.auditState ? 'el-icon-video-pause' : 'el-icon-video-play'" size="small" @click="onAuditStateChange">{{ ruleForm.auditState === 0 ? '审核': '撤销审核' }}</jk-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card>
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" :show-message="false">
				<div ref="box3" class="margin-bottom-10">
					<el-tag type="primary" effect="plain" class="margin-bottom-10">
						<span class="el-icon-tickets item-gap"></span>
						<span>基本信息</span>
					</el-tag>
					<jk-card>
						<el-row ref="box1">
							<!--<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="前纺计划" prop="productOrderPlanId">
								</el-form-item>
							</el-col>-->
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="品种名称" prop="productId">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.productName }}</span>
									<remote-search-product-input
										v-else
										:disabled="!!ruleForm.productOrderPlanId"
										placeholder="品种名称"
										only-key="productId"
										query-name="productName"
										:form-data="ruleForm"
										@on-select="onSelectProductChange"
									></remote-search-product-input>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="批号" prop="batchCode">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.batchCode }}</span>
									<remote-search-batch-code-input
										v-else
										:disabled="!ruleForm.productId || !!ruleForm.productOrderPlanId"
										placeholder="批号"
										only-key="batchCodeId"
										query-name="batchCode"
										:form-data="ruleForm"
										@on-select="onSelectBatchCodeChange"
									></remote-search-batch-code-input>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="领料员" prop="empId">
									<remote-search-emp-input
										placeholder="领料员"
										only-key="empId"
										query-name="empName"
										:form-data="ruleForm"
										@on-select="onSelectEmpChange"
									></remote-search-emp-input>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="领料日期" prop="billDate">
									<el-date-picker v-model="ruleForm.billDate" clearable type="date" style="width: 100%;" value-format="yyyy-MM-dd" placeholder="领料日期" />
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="区域" prop="workshopId">
									<span v-if="pageType === 'detail' || ruleForm.auditState > 0" class="read-only-2">{{ ruleForm.workshopName }}</span>
									<el-select v-else v-model="ruleForm.workshopId" clearable placeholder="所属区域" class="width-100-percent" @change="onWorkshopChange">
										<el-option
											v-for="item in workshopList"
											:key="item.id"
											:label="item.name"
											:value="item.id"
										></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item class="margin-bottom-0" label="备注">
									<el-input v-model="ruleForm.remark" type="textarea" :rows="1" placeholder="" />
								</el-form-item>
							</el-col>
						</el-row>
					</jk-card>
				</div>
				<div class="flex-between-center margin-bottom-4">
					<!--<el-tag type="primary" effect="plain">
						<span class="el-icon-notebook-2 item-gap"></span>
						<span>原料明细</span>
					</el-tag>-->
					<el-button size="mini" icon="el-icon-plus" type="primary" @click="selectProductDialogState = true">原料</el-button>
					<div class="flex-end-center">
						<div class="">
							<!--<el-button size="mini" type="default">
								<span>原料数量：</span>
								<span style="font-size: 13px;font-weight: 700;">{{ ruleForm.productList.length }}</span>
							</el-button>-->
						</div>
						<!--<el-button size="mini" type="default">
							<span>总重：</span>
							<span style="font-size: 13px;font-weight: 700;">{{ ruleForm.productList.length }}</span>
						</el-button>-->
					</div>
				</div>
				<el-row>
					<el-col :span="24">
						<jk-table ref="jkTable" v-loading="tableLoading" :data="ruleForm.productList" border :height="500" style="width: 100%">
							<vxe-table-column field="operation" title="操作" :width="70" align="center">
								<template slot-scope="scope">
									<el-button type="text" size="mini" icon="el-icon-delete" @click="ruleForm.productList.splice(scope.rowIndex, 1)"></el-button>
								</template>
							</vxe-table-column>
							<vxe-table-column type="seq" title="序号" width="60" align="center" />
							<vxe-table-column field="productCode" title="原料编号" :width="100" align="left"></vxe-table-column>
							<vxe-table-column field="productName" title="原料名称" :min-width="180" align="left"></vxe-table-column>
							<vxe-table-column field="productModels" title="规格" :min-width="180" align="left"></vxe-table-column>
							<vxe-table-column field="unitName" title="单位" :width="80" align="left"></vxe-table-column>
							<vxe-table-column field="supplier" title="供应商" :min-width="100" align="left"></vxe-table-column>
							<vxe-table-column field="useQty" title="申领数量" :min-width="100" align="center">
								<template slot-scope="scope">
									<jk-input v-model="scope.row.subQty" size="mini" placeholder=""></jk-input>
								</template>
							</vxe-table-column>
							<vxe-table-column field="useWeight" title="申领重量" :min-width="100" align="center">
								<template slot-scope="scope">
									<jk-input v-model="scope.row.subWeight" size="mini" placeholder=""></jk-input>
								</template>
							</vxe-table-column>
							<vxe-table-column field="useQty" title="实发数量(审核后由仓管员填入)" :min-width="100" align="center">
								<template slot-scope="scope">
									<jk-input v-model="scope.row.subQty" size="mini" placeholder=""></jk-input>
								</template>
							</vxe-table-column>
						</jk-table>
					</el-col>
				</el-row>
			</el-form>
		</jk-card>
		<checkbox-product-dialog
			:default-select-rows="ruleForm.productList"
			default-stock-type="RAW_MATERIAL"
			check-key-name="productId"
			:dialog-state="selectProductDialogState"
			@on-confirm="onConfirmBtnOfSelectProductDialog"
			@on-visible-change="onVisibleChangeOfSelectProductDialog"
		></checkbox-product-dialog>
	</jk-view>
</template>

<script>
    import technologyOrder from './form-box-mixin';
    export default {
        name: 'TechnologyOrder',
        mixins: [technologyOrder],
        data() {
            return {};
        },
        methods: {

        },
        mounted() {
            this.getDependentData();
        }
    };
</script>
<style scoped lang="scss">
</style>
